import {Layout} from "antd"
import SiderMenu from "./siderMenu";
import manageMenus from '../../routes/manage.config';
import {useEffect, useState} from "react";
import {RouteComponentProps, useHistory, withRouter} from "react-router-dom";

import "./siderCustom.less"
import {MenuInfo} from "rc-menu/lib/interface";

const {Sider} = Layout;

interface IMenu {
    selectedKey: string;
}

export interface SiderCustomProps extends RouteComponentProps<any> {
    collapsed?: boolean;
}

/**
 * 自定义侧边栏
 */
const SiderCustom = (props: SiderCustomProps) => {
    const {collapsed} = props;

    const {location} = useHistory();
    const [menu, setMenu] = useState<IMenu>({selectedKey: ""});

    const {pathname} = location;

    // 通过监听路由变化的方式来控制路由
    useEffect(() => {
        setMenu((preState) => ({...preState, selectedKey: pathname}));
    }, [pathname])

    // 处理菜单点击
    const handleMenuClick = (e: MenuInfo) => {
        // setMenu((preState) => ({...preState, selectedKey: e.key}));
    };

    return (
        <Sider className="sider-custom"
               trigger={null}
               breakpoint="lg"
               collapsed={collapsed}
               style={{overflowY: 'auto'}}
               theme="light"
        >
            <div className="logo">
            </div>
            <SiderMenu
                mode="inline"
                menus={[...manageMenus.menus]}
                onClick={handleMenuClick}
                selectedKeys={[menu.selectedKey]}
            />
            <style>
                {`
                    #nprogress .spinner{
                        left: ${collapsed ? '70px' : '206px'};
                        right: 0 !important;
                    }
                `}
            </style>
        </Sider>
    )
}

export default withRouter(SiderCustom);
